<template>
  <div :class="mode === 'pop' ? 'mask' : ''" v-show="showBox">
    <div
      :class="mode === 'pop' ? 'verifybox' : ''"
      :style="{ 'max-width': parseInt(imgSize.width) + 30 + 'px' }"
    >
      <div class="verifybox-top" v-if="mode === 'pop'">
        请完成安全验证
        <span class="verifybox-close" @click="closeBox">
          <i class="iconfont icon-close"></i>
        </span>
      </div>
      <div
        class="verifybox-bottom"
        :style="{ padding: mode === 'pop' ? '15px' : '0' }"
      >
        <!-- 验证码容器 -->
        <components
          v-if="componentType"
          :is="componentType"
          :captchaType="captchaType"
          :type="verifyType"
          :figure="figure"
          :arith="arith"
          :mode="mode"
          :vSpace="vSpace"
          :explain="explain"
          :imgSize="imgSize"
          :blockSize="blockSize"
          :barSize="barSize"
          :defaultImg="defaultImg"
          ref="instance"
        ></components>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
/**
 * Verify 验证码组件
 * @description 分发验证码使用
 * */
import VerifySlide from "./Verify/VerifySlide";
import VerifyPoints from "./Verify/VerifyPoints";

export default {
  name: "Vue2Verify",
  props: {
    // 双语化
    locale: {
      require: false,
      type: String,
      default() {
        let language;
        // 默认语言不输入为浏览器语言
        if (navigator.language) {
          language = navigator.language;
        } else {
          language = navigator.browserLanguage;
        }
        return language;
      },
    },
    captchaType: {
      type: String,
      required: true,
    },
    figure: {
      type: Number,
    },
    arith: {
      type: Number,
    },
    mode: {
      type: String,
      default: "pop",
    },
    vSpace: {
      type: Number,
    },
    explain: {
      type: String,
    },
    imgSize: {
      type: Object,
      default() {
        return {
          width: "310px",
          height: "155px",
        };
      },
    },
    blockSize: {
      type: Object,
    },
    barSize: {
      type: Object,
    },
  },
  data() {
    return {
      // showBox:true,
      clickShow: false,
      // 内部类型
      verifyType: undefined,
      // 所用组件类型
      componentType: undefined,
      // 默认图片
      defaultImg: require("@/assets/images/default.jpg"),
    };
  },
  mounted() {
    this.uuid();
  },
  methods: {
    // 生成 uuid
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var slider = "slider" + "-" + s.join("");
      var point = "point" + "-" + s.join("");
      // 判断下是否存在 slider
      if (!localStorage.getItem("slider")) {
        localStorage.setItem("slider", slider);
      }
      if (!localStorage.getItem("point")) {
        localStorage.setItem("point", point);
      }
    },
    /**
     * i18n
     * @description 兼容vue-i18n 调用$t来转换ok
     * @param {String} text-被转换的目标
     * @return {String} i18n的结果
     * */
    i18n(text) {
      if (this.$t) {
        return this.$t(text);
      } else {
        // 兼容不存在的语言
        let i18n =
          this.$options.i18n.messages[this.locale] ||
          this.$options.i18n.messages["en-US"];
        return i18n[text];
      }
    },
    /**
     * refresh
     * @description 刷新
     * */
    refresh() {
      if (this.instance.refresh) {
        this.instance.refresh();
      }
    },
    closeBox() {
      this.clickShow = false;
      this.refresh();
    },
    show() {
      if (this.mode === "pop") {
        this.clickShow = true;
      }
    },
  },
  computed: {
    instance() {
      return this.$refs.instance || {};
    },
    showBox() {
      if (this.mode === "pop") {
        return this.clickShow;
      } else {
        return true;
      }
    },
  },
  watch: {
    captchaType: {
      immediate: true,
      handler(captchaType) {
        switch (captchaType.toString()) {
          case "blockPuzzle":
            this.verifyType = "2";
            this.componentType = "VerifySlide";
            break;
          case "clickWord":
            this.verifyType = "";
            this.componentType = "VerifyPoints";
            break;
        }
      },
    },
  },
  components: {
    VerifySlide,
    VerifyPoints,
  },
};
</script>
<style scoped lang="scss">
::v-deep.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  /* display: none; */
  transition: all 0.5s;

  .verifybox {
    position: relative;
    box-sizing: border-box;
    border-radius: 2px;
    border: 1px solid #e4e7eb;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .iconfont {
      font-family: "iconfont", serif !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .verifybox-top {
      padding: 0 15px;
      height: 50px;
      line-height: 50px;
      text-align: left;
      font-size: 16px;
      color: #45494c;
      border-bottom: 1px solid #e4e7eb;
      box-sizing: border-box;

      .verifybox-close {
        position: absolute;
        top: 13px;
        right: 9px;
        width: 24px;
        height: 24px;
        text-align: center;
        cursor: pointer;

        .icon-close:before {
          content: " ";
          display: block;
          width: 16px;
          height: 16px;
          position: absolute;
          margin: auto;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 9999;
          background-image: url("");
          background-size: contain;
        }
      }
    }

    .verifybox-bottom {
      padding: 15px;
      box-sizing: border-box;

      .verify-img-out {
        .verify-img-panel {
          margin: 0;
          -webkit-box-sizing: content-box;
          -moz-box-sizing: content-box;
          box-sizing: content-box;
          border-top: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
          border-radius: 3px;
          position: relative;

          .verify-refresh {
            width: 25px;
            height: 25px;
            text-align: center;
            padding: 5px;
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
          }

          .icon-refresh {
            font-size: 20px;
            color: #fff;
          }

          .verify-gap {
            background-color: #fff;
            position: relative;
            z-index: 2;
            border: 1px solid #fff;
          }
        }
      }


      .verify-tips {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #fff;
      }

      .suc-bg {
        background-color: rgba(92, 184, 92, 0.5);
        filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
      }

      .err-bg {
        background-color: rgba(217, 83, 79, 0.5);
        filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
      }

      .tips-enter,
      .tips-leave-to {
        bottom: -30px;
      }

      .tips-enter-active,
      .tips-leave-active {
        transition: bottom 0.5s;
      }

      /*滑动验证码*/
      .verify-bar-area {
        position: relative;
        background: #ffffff;
        text-align: center;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        border: 1px solid #ddd;
        -webkit-border-radius: 4px;

        .verify-move-block {
          position: absolute;
          top: 0px;
          left: 0;
          background: #fff;
          cursor: pointer;
          -webkit-box-sizing: content-box;
          -moz-box-sizing: content-box;
          box-sizing: content-box;
          box-shadow: 0 0 2px #888888;
          -webkit-border-radius: 1px;
        }

        .verify-move-block:hover {
          background-color: #337ab7;
          color: #ffffff;
        }

        .verify-left-bar {
          position: absolute;
          top: -1px;
          left: -1px;
          background: #f0fff0;
          cursor: pointer;
          -webkit-box-sizing: content-box;
          -moz-box-sizing: content-box;
          box-sizing: content-box;
          border: 1px solid #ddd;
        }

        .verify-msg {
          z-index: 3;
        }

        .verify-move-block {
          .verify-sub-block {
            position: absolute;
            text-align: center;
            z-index: 3;
            /* border: 1px solid #fff; */
          }

          .verify-icon {
            font-size: 18px;
          }
        }
      }


      .icon-check:before {
        content: " ";
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
        background-image: url("");
        background-size: contain;
      }


      .icon-right:before {
        content: " ";
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
        background-image: url("");
        background-size: contain;
      }

      .icon-refresh:before {
        content: " ";
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
        background-image: url("");
        background-size: contain;
      }
    }
  }
}
</style>
